<template>
    <div>
        <el-tabs :before-leave="beforeLeave" v-model="activeName" type="card">
            <el-tab-pane label="设备列表" name="EquipmentList">
                <EquipmentList/>
            </el-tab-pane>
            <el-tab-pane label="设备分布" name="EquipmentMap">
                <EquipmentMap/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import EquipmentList from "../components/EquipmentDataComponents/EquipmentList";
import EquipmentMap from "../components/EquipmentDataComponents/EquipmentMap";
import {mapActions,mapState} from "vuex";

export default {
    name: "Equipment",
    data(){
        return{
            activeName: "EquipmentList"
        }
    },
    computed: {
        ...mapState({
            equipmentData: state => state.active.equipmentData
        })
    },
    components: {
        EquipmentList,
        EquipmentMap
    },
    methods: {
        ...mapActions([
            'getAllEquipments'
        ]),
        beforeLeave(activeName,oldActiveName) {
            if((activeName === 'EquipmentMap') && (this.equipmentData.total !== this.equipmentData.data.length)){
                this.getAllEquipments()
            }
        }
    }
}
</script>

<style scoped>
::v-deep .el-tabs__item.is-active {
    background-color: #f7f7f7;
    font-weight: bold;
}
</style>